<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQuery021</title>

<!-- 
第一节：文档加载事件
第二节：DOM 单击、双击事件
第三节：DOM 获得焦点、失去焦点事件
第四节：DOM 鼠标移入，移出事件
 -->
<script type="text/javascript" src="../js/jquery-3.1.1.js"></script>

<script type="text/javascript">
	//文档加载完毕事件
	$(document).ready(function(){
		//alert("文档加载完毕");
		
		//按钮单击事件绑定，在文档加载完毕的时候进行绑定
		$("#zs").click(function(){
			$("#p1").html("<font color=red size=50px>张三被点击了</font>");		
		});
		//按钮双击事件绑定，在文档加载完毕的时候进行绑定
		$("#zs").dblclick(function(){
			$("#p1").html("<font color=red size=50px>张三被双击了</font>");		
		});
		//获得焦点事件
		$("#t1").focus(function(){
			$("#t1").val("获得焦点");
		});
		//失去焦点事件
		$("#t1").blur(function(){
			$("#t1").val("失去焦点");
		});
		//鼠标移入事件
		$("#d1").mouseover(function(){
			$("#d1").html("鼠标移入");
		});
		//鼠标移出事件
		$("#d1").mouseout(function(){
			$("#d1").html("鼠标移出");
		});
		
	});
	
	

</script>
</head>
<body>

<input type="button" id="zs" value="张三"/>
<p id="p1"><font color="red" size="50px"></font></p>
<input type="text" id="t1"/>
<hr/>
<div id="d1" style="border: 1px red solid;width: 100px;height: 100px;"></div>

</body>
</html>